<template>
  <div class="loginz">
    <div class="login">
      <div class="lefta">
        <img src="../assets/780.jpg" width="100%" height="100%" />
      </div>
      <div class="right">
        <div class="login-content">
          <h1>帐号密码登陆</h1>
          <el-input v-model="id" placeholder="用户名"></el-input>
          <el-input v-model="password" placeholder="密码"></el-input>
          <el-button type="primary" @click="index">立即登陆</el-button>
          <div class="forget">忘记密码</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "loginz",
  data() {
    return {
      id: "",
      password: ""
    };
  },
  created() {},
  methods: {
    index() {
      let params = {
        name: this.id,
        password: this.password
      };
      console.log(params);
      this.$axios.post("/api/ZshAdmin/Login", params).then(res => {
        console.log(res);
        if (res.data) {
          this.$message({
            message: "登陆成功",
            type: "success"
          });
          this.$router.push("/information");
        } else {
          this.$message({
            message: "密码错误",
            type: "error"
          });
        }
      });
    }
  }
};
</script>

<style scoped>
.loginz {
  height: 100%;
}
.login {
  height: 100%;
  display: flex;
}
.lefta {
  flex: 1;
}
.right {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.login-content {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.el-input {
  width: 300px;
  padding-bottom: 10px;
}
.forget {
  font-size: 13px;
  color: #409eff;
  cursor: pointer;
  padding-top: 10px;
  padding-left: 230px;
}
</style>
